<template>
  <div
    v-title
    data-title="理货工作台"
    v-loading="gLoad"
    element-loading-text="数据正在提交,请稍后"
    element-loading-spinner="el-icon-loading"
  >
    <el-card class="box-card" shadow="hover">
      <div>
        <el-input
          v-model="scanInput"
          :placeholder="scanInputPlaceholder"
          class="headerInputClass"
          @keydown.enter.native="enterScanInput()"
          ref="scanInputfocus"
          @focus="$event.currentTarget.select()"
          autofocus="autofocus"
        >
        </el-input>
      </div>
      <div>
        <el-descriptions class="margin-top" border :column="3">
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="任务编号"
          >
            {{ BillId }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="商品编码"
          >
            {{ CurrentGoods.SkuId }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="组编号"
          >
            {{ GroupNo }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="商品描述"
          >
            {{ CurrentGoods.SkuName }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
    <el-row :gutter="12" class="box-card card_box">
      <el-col :span="11">
        <el-card shadow="hover" class="box-card_detail paddingStyle">
          <div slot="header" class="clearfix">
            <span>源箱</span>
          </div>
          <el-table
            :data="AllGoods"
            height="46vh"
            border
            style="width: 100%; font-size: calc(100vh - 98.5vh)"
          >
            <el-table-column
              align="center"
              prop="CID"
              label="源料箱编码"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="LocationId"
              label="料箱库位"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="SkuId"
              label="物料编码"
              sortable
            ></el-table-column>
            <el-table-column
              align="center"
              prop="SkuName"
              label="物料名称"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="Qty"
              label="物料数量"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="BatchNo"
              label="批次号"
            ></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="7">
        <el-card shadow="hover" class="box-card_detail">
          <div slot="header" class="clearfix">
            <span>数量信息</span>
          </div>
          <div>
            <div class="ItemNumInfo" @click="clickCalculator()">
              <span>{{ scansNum }}</span
              >/<br /><span>{{ scansTotalNum }}</span>
            </div>
            <br /><br />
            <div class="ItemNumlabel">数量/总数量</div>
            <div class="ItemNumInfoDetail">单位：{{ CurrentGoods.Unit }}</div>
            <div class="ItemNumInfoDetail">
              规格：<span>{{ CurrentGoods.Spec }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="imageClass_detail">
          <div slot="header" class="clearfix">
            <span>源货架位置[{{ CurrentGoods.FromLoc }}]</span>
          </div>
          <div class="image_Or">
            <el-image
              class="TargetLocationImag1"
              :src="Imag.ExchangeAreaImagO"
              lazy
            >
            </el-image>
            <el-image
              :src="Imag.OriginalLocationImag"
              class="TargetLocationImag"
              lazy
            ></el-image>
          </div>
        </el-card>
        <el-card shadow="hover" class="imageClass_detail">
          <div slot="header" class="clearfix">
            <span>源容器[{{ CurrentGoods.CID }}]</span>
          </div>
          <div class="rotateClass">
            <el-image :src="Imag.OriginalCIDImag" lazy>
              <div slot="error" class="image-slot"></div>
            </el-image>
          </div>
        </el-card>
      </el-col>
      <el-col :span="5" v-show="false">
        <el-card shadow="hover" class="imageClass_detail">
          <div slot="header" class="clearfix">
            <span>目标货架位置[{{ CurrentGoods.ToLoc }}]</span>
          </div>
          <div class="image_Or">
            <el-image
              class="TargetLocationImag1"
              :src="Imag.ExchangeAreaImagT"
              lazy
            >
            </el-image>
            <el-image
              :src="Imag.TargetLocationImag"
              class="TargetLocationImag"
              lazy
            ></el-image>
          </div>
        </el-card>
        <el-col :span="6"> </el-col>
        <el-card shadow="hover" style="" class="imageClass_detail">
          <div slot="header" class="clearfix">
            <span>目标容器[{{ CurrentGoods.ToCID }}]</span>
          </div>
          <div class="rotateClass">
            <el-image :src="Imag.TargetCIDImag" lazy>
              <div slot="error" class="image-slot"></div>
            </el-image>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card shadow="never" class="card_button">
      <el-button @click="PrintBarcode()" disabled v-show="false"
        >打印条码</el-button
      >
      <el-button
        type="primary"
        class="buttonClass"
        @click="CompleteTaskButton()"
        :loading="submit.CompleteTask"
        :disabled="ALL_Tay_List.length == 0"
        >任务完成</el-button
      >
      <span style="margin-left: 30px"
        >工作台: {{ UserInfo.WbInfo.WbName }}</span
      >
    </el-card>
    <!-- 数字输入  -->
    <el-dialog :visible.sync="CalculatorDialogVisible" width="30%">
      <Calculator v-on:clickCardOk="clickCardOk" />
    </el-dialog>
    <!--  -->
    <el-dialog
      class="dialog_commit"
      title="提示"
      :visible.sync="SkuVisible"
      top="5vh"
      width="45vw"
    >
      <el-form v-model="SelectSkuId">
        <el-form-item>
          <el-radio-group v-model="SelectSkuId" size="big">
            <el-radio
              border
              :label="item.SkuId"
              v-for="item in Original"
              :key="item.SkuId"
              class="el-radio_item"
              >{{ item.SkuName }} {{ item.SkuId }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ScanSkuOPT(SelectSkuId)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <audioPaly :audioValue="audioPaly"></audioPaly>
  </div>
</template>

<script>
import Arithmetic from '@/utils/ArithmeticMethod.js'
import {
  GETLocationInfo,
  GetCIDInfo,
  TallyTask,
  TallyTaskPOST,
  TallyInbPUT,
  TallyTaskPUT,
} from '@/api/api.js'
import Calculator from '@/components/pluginunit/Calculator.vue'
import audioPaly from '@/components/pluginunit/audioPaly.vue'
export default {
  name: 'TallyOpt',
  props: ['searchVal'],
  components: {
    Calculator,
    audioPaly,
  },
  data () {
    return {
      submit: {
        loading: false,
        CompleteTask: false,
      },
      SkuVisible: false,
      audioPaly: '',
      // 扫描框内容
      scanInput: '',
      // 扫描框当前扫描类型
      scanType: 'OrderID',
      scanInputPlaceholder: '',
      scanInputFlag: true,
      scanInputType: {
        OrderID: '当前暂无订单需要理货.....',
        ToCID: '请扫描目标箱.....',
        FromCID: '请扫描任意源箱托盘.....',
        SkuId: '扫描物料编码.....',
        TargetLocation: '确认数量后，拍灯或扫描料箱编码.....',
      },
      // 指定目标库位和目标箱
      TargetBox: '',
      TargetLocation: '',
      OriginalLocation: '',
      SelectSkuId: '',
      OriginalCID: '',
      Imag: {
        ExchangeAreaImagT: '',
        ExchangeAreaImagO: '',
        OriginalLocationImag: '',
        OriginalCIDImag: '',
        TargetLocationImag: '',
        TargetCIDImag: '',
      },
      // 当前扫描商品信息（显示）
      CurrentGoods: {
        BillId: '',
        SkuId: '',
        SkuName: '',
        ImgUrl: '',
        QtyIn: 0
      },
      BillId: '',
      // 全部应扫描商品
      AllGoods: [],
      // 剩余应扫描商品
      ScannedGoods: [],
      // 扫描记录
      ScanRecord: [],
      // 页面显示应扫描数
      scansTotalNum: 0.0,
      // 页面显示当前已扫描数
      scansNum: 0.0,
      // 输入框标识
      CalculatorDialogVisible: false,
      UserInfo: {
        WbInfo: {
          WbName: '',
        },
      },
      CommitFrom: {
        CID: '',
        LocationId: '',
      },
      WarehouseId: '',
      StorerId: '',
      TallyCID: [],
      TallySku: [],
      Target: {},
      Original: [],
      OriginalItem: {},
      GroupNo: null,
      gLoad: false,
      //   ---
      ptl_url: 'ws://localhost:13145/Ptl',
      print_url: 'ws://localhost:13145/Print?UserId=',
      login_url: "ws://localhost:13145/Login?UserId=",
      ws: {
        ptl_ws: null,
        print_ws: null,
        login_ws: null
      },
      setIntervalWesocketPush: {
        ptl_ws: null,
        print_ws: null,
        login_ws: null
      },
      //灯颜色
      ColorEnum: {
        red: 1,
        green: 2,
        blue: 3,
        yellow: 4,
        pink: 5,
        cyan: 6,
        white: 7
      },
      ALL_Tay_List: []
    }
  },
  created () {
    window.removeEventListener('onmessageWS', this.getSocketData);
    this.UserInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.init()
    // this.scanInputMethod(this.scanType)
    setTimeout(() => {
      this.GETTaskInfo()
    }, 500)
    this.getUrlPath()
  },
  methods: {
    GETTaskTimer () {
      /***
       * @description: 定时器
       * @param {*}
       * @return {*}
       * @author: white_queen
       */
      this.timer = null
      this.timer = setTimeout(() => {
        this.GETTaskInfo()
      }, 15000)
    },
    GETTaskInfo () {
      /***
       * @description: 获取任务后对数据进行处理
       * @param {*}
       * @return {*}
       * @author: white_queen
       */
      const params = {
        UserId: this.UserInfo.UserId,
        WbId: this.UserInfo.WbInfo.WbId,
        time: Date.parse(new Date()),
      }
      TallyTask(params)
        .then((res) => {
          let result = res.data
          if (result.code === 0) {
            if (result.data.length > 0) {
              this.ALL_Tay_List = result.data
              result.data.forEach((item) => {
                this.TallyCID.push(item.CID)
                this.TallySku.push(item.SkuId)
              });
              this.BillId = result.data[0].BillId
              this.GroupNo = result.data[0].GroupNo
              this.TallyInb_val()
            } else {
              this.scanInputMethod('OrderID')
            }
          } else {
            this.audioPlay('error')
            this.$message({
              message: result.message,
              type: 'error',
            })
            this.scanInputMethod('OrderID')
          }
        })
        .catch((error) => {
          this.scanInputMethod('OrderID')
          throw error
        })
    },
    TallyInb_val () {
      const params = {
        UserId: this.UserInfo.UserId,
        WbId: this.UserInfo.WbInfo.WbId,
        CID: this.TallyCID,
        SkuId: this.TallySku,
        time: Date.parse(new Date()),
      }
      TallyInbPUT(params).then((res) => {
        const result = res.data
        if (result.code === 0 && result.data.length > 0) {
          this.AllGoods = result.data
          this.AllGoods.forEach((item) => {
            this.PTL_Lighting(item.LocationId, this.ColorEnum.green, item.Qty, item.SkuId)
          })
          this.SummarizeTaskInfo('init')
          this.scanInputMethod('FromCID')
        }
      }).catch((error) => {
        this.scanInputMethod('OrderID')
        throw error
      })
    },
    ScanFromCID (value) {
      var flag = false;
      for (var i = 0; i < this.ALL_Tay_List.length; i++) {
        if (this.ALL_Tay_List[i].CID === value && this.ALL_Tay_List[i].ToCID != value) {
          this.CurrentGoods = this.ALL_Tay_List[i]
          flag = true;
          break;
        }
      }
      for (var i = 0; i < this.AllGoods.length; i++) {
        if (this.AllGoods[i].CID === value && this.AllGoods[i].ToCID != value) {
          this.OriginalItem = this.AllGoods[i]
          break;
        }
      }
      if (flag) {
        this.LocationSearch(this.OriginalItem.LocationId, 'OriginalLocationImag')
        this.ImageCIDSearch(this.OriginalItem.CID, 'OriginalCIDImag', true)
        // this.LocationSearch(this.CurrentGoods.ToLoc, 'TargetLocationImag')
        // this.ImageCIDSearch(this.CurrentGoods.ToCID, 'TargetCIDImag', true)
        this.SummarizeTaskInfo(value)
        this.scanInputMethod('TargetLocation')
      } else {
        this.$message({
          type: 'error',
          message: '请扫描正确源箱操作',
        })
        return
      }

    },
    ScanSkuOPT (value) {
      for (let j = 0; j < this.Original.length; j++) {
        if (this.Original[j].SkuId == value) {
          this.OriginalItem = this.Original[j]
          this.OriginalLocation = this.Original[j].LocationId
          this.OriginalCID = this.Original[j].CID
          this.CurrentGoods = this.OriginalItem
          this.LocationSearch(this.OriginalLocation, 'OriginalLocationImag')
          this.ImageCIDSearch(this.OriginalCID, 'OriginalCIDImag', true)
          break
        }
      }
      console.log(this.Original, this.OriginalItem, value)
      this.SummarizeTaskInfo(value)
      this.scanInputMethod('TargetLocation')
      this.SkuVisible = false
    },
    TargetLocationPush (value) {
      if (this.CurrentGoods.QtyIn == undefined || this.CurrentGoods.QtyIn == 0) {
        this.audioPlay('error')
        this.$message({
          type: 'error',
          message: '请输入确认数量后提交',
        })
        return
      }
      if (this.OriginalItem.LocationId == value) {
        this.audioPlay('error')
        this.$message({
          type: 'error',
          message: '扫描库位为源库位，请检查',
        })
        return
      }
      for (let i = 0; i < this.AllGoods.length; i++) {
        if (this.AllGoods[i].LocationId == value) {
          this.Target = this.AllGoods[i]
          break
        }
      }
      if (value == this.Target.LocationId) {
        const pasr = {
          BillId: this.BillId,
          FromCID: this.OriginalItem.CID,
          FromLoc: this.OriginalItem.LocationId,
          ToCID: this.Target.CID,
          ToLoc: this.OriginalItem.LocationId,
          FromQty: this.OriginalItem.Qty,
          ToQty: this.CurrentGoods.QtyIn,
          SkuId: this.CurrentGoods.SkuId,
          BatchNo: this.OriginalItem.BatchNo,
          FromBoxCode: this.CurrentGoods.BoxCode,
          ToBoxCode: this.Target.BoxCode,
          WbId: this.UserInfo.WbInfo.WbId,
          UserId: this.UserInfo.UserId,
        }
        TallyTaskPUT(pasr).then((res) => {
          const result = res.data
          if (result.code === 0) {
            this.$message({
              type: 'success',
              message: result.message,
            })
            this.AllGoods.forEach((item) => {
              this.PTL_OFF(item.LocationId, false)
            })
            this.audioPlay('success')
            this.TallyInb_val()
          } else {
            this.audioPlay('error')
            this.$message({
              type: 'error',
              message: result.message,
            })
          }
        })
      } else {
        this.audioPlay('error')
        this.$message({
          type: 'error',
          message: '请扫描正确库位操作',
        })
      }
    },
    CompleteTaskButton () {
      this.submit.loading = true
      this.$confirm('请确认是否完成当前理货分组?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      }).then(() => {
        const params = {
          UserId: this.UserInfo.UserId,
          BillId: this.BillId,
          GroupNo: this.GroupNo,
          time: Date.parse(new Date()),
        }
        TallyTaskPOST(params).then((res) => {
          if (res.data.code === 0) {
            this.audioPlay('success')
            this.$message({
              type: 'success',
              message: '成功',
            })
            this.ALL_Tay_List.forEach((item) => {
              this.PTL_OFF(item.TargetLoc, false)
            })
            this.scanInputMethod('OrderID', false)
            this.GETTaskInfo()
          } else {
            this.audioPlay('error')
            this.$message({
              type: 'error',
              message: res.data.message,
            })
          }
        })
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消当前提交操作',
          })
        })
      this.submit.loading = false
    }, // 异步登录打印机
    // WEBSOCKET 开始
    async init (socket_type = true, connect_num = 0) {
      if (socket_type === true || socket_type === 'ptl_ws') {
        this.ws.ptl_ws = null;
        this.ws.ptl_ws = new WebSocket(this.ptl_url);
        this.ws.ptl_ws.currSocketId = 'ptl_ws'
        this.ws.ptl_ws.connect_num = connect_num
        this.ws.ptl_ws.currSocketName = '库位灯程序'
        this.ws.ptl_ws.onopen = this.ws_connect
        this.ws.ptl_ws.onmessage = this.PtlOnMessage
        this.ws.ptl_ws.onerror = this.ws_error
      }
      if (socket_type === true || socket_type === 'login_ws') {
        this.ws.login_ws = null;
        this.ws.login_ws = new WebSocket(this.login_url + this.UserInfo.UserId);
        this.ws.login_ws.currSocketId = 'login_ws'
        this.ws.login_ws.currSocketName = 'WET登录'
        this.ws.login_ws.onopen = this.ws_connect
        this.ws.login_ws.connect_num = connect_num
        this.ws.login_ws.onmessage = function (e) {
          console.log('登录在线.....');
        };
        this.ws.login_ws.onerror = this.ws_error
        this.ws_connect_login()
      }
      if ((socket_type === true || socket_type === 'print_ws') && false) {
        this.ws.print_ws = null;
        this.ws.print_ws = new WebSocket(this.print_url + this.UserInfo.UserId);
        this.ws.print_ws.currSocketId = 'print_ws'
        this.ws.print_ws.connect_num = connect_num
        this.ws.print_ws.currSocketName = '打印机程序'
        this.ws.print_ws.onopen = this.ws_connect
        this.ws.print_ws.onmessage = function (e) {
          console.log('打印机_OnMessage');
        };
        this.ws.print_ws.onerror = this.ws_error
      }
    },
    ws_error (e) {
      this.onerrorWS(e.currentTarget)
    },
    onerrorWS (ws) {
      clearInterval(this.setIntervalWesocketPush[ws.currSocketId])
      console.log(ws.currSocketName, ws)
      if (ws.readyState === 3 && ws.connect_num < 3) {
        this.$message({
          message: ws.currSocketName + '连接失败,重连中......',
          type: 'error'
        });
        setTimeout(() => {
          this.init(ws.currSocketId, ws.connect_num + 1)
        }, 10000)
      } else {
        this.$message({
          message: '' + ws.currSocketName + '连接失败，无法重新连接，请联系管理员！',
          type: 'error'
        });
      }
    },
    ws_connect (e) {
      this.sendPing(e.currentTarget)
    },
    ws_connect_login () {
      if (this.ws.login_ws.readyState === 1) {
        var command = {
          RemoteUrl: this.UserInfo.RemoteUrl,
        };
        this.ws.login_ws.send(JSON.stringify(command));
      } else {
        setTimeout(() => {
          this.ws_connect_login()
        }, 1500)
      }
    },
    sendPing (ws, time = 15000, ping = 'ping.....') {
      console.log(ws.currSocketName + ' 连接成功......')
      clearInterval(this.setIntervalWesocketPush[ws.currSocketId])
      this.setIntervalWesocketPush[ws.currSocketId] = setInterval(() => {
        ws.send(ping)
      }, time)
    },
    PtlOnMessage (e) {
      const data = JSON.parse(e && e.data)
      console.log(data)
      if (data.Type === 'PTL_Lighting') {
        var Loc = data.Id.split('_')[0]
        if (data.Code == 0) {
          this.$message({
            type: 'success',
            message: '【' + Loc.toString() + '】,亮灯成功!'
          });
        } else {
          this.$message({
            type: 'error',
            message: Loc.toString() + ' _ ' + data.Message.toString() + ',亮灯失败!'
          });
        }
      }
      else if (data.Type === 'PTL_Close') {
        console.log('PTL_Close', data)
      }
      else if (data.Type.toLowerCase() === 'ptl_off') {
        this.TargetLocationPush(data.Data.Tag)
      } else {
        this.$message({
          type: 'error',
          message: 'WET消息错误'
        });
      }
    },
    // 
    async PTL_Lighting (LocationId, Color, QtyPlan, SkuId) {
      const params = {
        "Id": (LocationId || '').toString() + '_' + new Date().getTime().toString(),
        "Type": "PTL_Lighting",
        "Data": {
          "Tag": LocationId,
          "Num": (QtyPlan || '').toString(),
          "Mode": "1",
          "Color": Color,
          "Updown": "2",
          "Locator": "",
          "Message": (SkuId || '').toString(),
          "PressOff": "1"
        }
      }
      if ((LocationId || '') != '') {
        this.$message({
          type: 'warning',
          message: '发送点亮库位【' + LocationId.toString() + '】信号'
        });
        this.ws.ptl_ws.send(JSON.stringify(params))
      }
    },
    async PTL_Close (LocationId) {
      const params = {
        "Id": new Date().getTime().toString(),
        "Type": "PTL_Close",
        "Data": {
          "Tag": LocationId
        }
      }
      this.ws.ptl_ws.send(JSON.stringify(params))
    },
    async PTL_OFF (LocationId, flag = false) {
      this.PTL_Close(LocationId)
      //   this.scanInputMethod('OrderID', false)
      //   if (flag) {
      //     this.GETTaskInfo()
      //   }
    },
    // 打印条码
    PrintBarcode () {
      // 存储区不能为空，且需要扫描指定订单后才能打印条码。
      if (this.StorerId == '' || this.scanType == 'OrderID') {
        this.audioPlay('error')
        this.$message({
          type: 'info',
          message: '请先扫描订单',
        })
        return
      }

      this.$prompt('请输入要打印的商品编码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(({ value }) => {
          var url = 'ws://localhost:13145/Print?UserId=' + this.UserInfo.UserId
          var command = [
            {
              TaskId: value + '_' + Date.parse(new Date()).toString(),
              WarehouseId: this.WarehouseId,
              StorerId: this.StorerId,
              MenuId: 'M222',
              Action: 'Print',
              DataSourceParameter:
                "{'StorerId':'" + this.StorerId + "',SkuId:'" + value + "'}",
            },
          ]
          this.SendCommand(url, command)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '打印已取消',
          })
        })
    },
    /**
     * 声音播放
     * @param {*} value 
     */
    audioPlay (value) {
      this.audioPaly = value
      setTimeout(() => {
        this.audioPaly = ''
      }, 1000)
    },
    /**
     * 输入框回车调用
     */
    enterScanInput () {
      if (!this.checkInputEmpty()) {
        return
      }
      const value = this.scanInput.replace(/\ +/g, "").replace(/[\r\n]/g, "");
      this.scanInput = value
      // 订单信息
      if (this.scanType == 'OrderID') {
        this.GETTaskInfo(value)
      }
      // 扫描源箱
      else if (this.scanType == 'FromCID') {
        this.ScanFromCID(value)
      }
      // 扫描SkuId
      else if (this.scanType == 'SkuId') {
        this.ScanTargetBox(value)
      }
      // 扫描目标库位
      else if (this.scanType == 'TargetLocation') {
        this.AllGoods.forEach((item) => {
          if (item.CID == value) {
            this.TargetLocationPush(item.LocationId)
            return
          }
        })
      } else {
        this.$message({
          message: '系统错误，请刷新当前页面',
          type: 'error',
        })
        return
      }
      this.$nextTick(() => {
        this.$refs.scanInputfocus.focus()
      })
    },
    // 库位图展示
    LocationSearch (value, type) {
      const params = {
        UserId: this.UserInfo.UserId,
        LocationId: value,
        time: Date.parse(new Date()),
      }
      GETLocationInfo(params)
        .then((res) => {
          var result = res.data.data[0]
          if (res.data.code == 0) {
            this.audioPlay('ok')
            this.Imag[type] = this.ImageViewerUrl(result.LRow, result.LColumn, result.LLayer)
            if (type == 'TargetLocationImag') {
              this.Imag['ExchangeAreaImagT'] = this.ExchangeAreaImagUrl(result.LRow, result.LColumn, result.LLayer)
            } else if (type == 'OriginalLocationImag') {
              this.Imag['ExchangeAreaImagO'] = this.ExchangeAreaImagUrl(result.LRow, result.LColumn, result.LLayer)
            }
            if (type === 'TargetLocation') {
              this.ScanTargetLocation(value)
            }
          } else {
            this.audioPlay('notexist')
            this.$message({
              message: '目标库位错误，请确定库位是否正确',
              type: 'error',
            })
          }
        })
        .catch((error) => {
          throw error
        })
    },
    ImageViewerUrl (LRow, LColumn, LLayer) {
      try {
        return require('../assets/imag/shewc/' + LColumn + '-' + LLayer + '.png')
      } catch (e) {
        console.log('ImageViewerUrl', e.toString())
        return ''
      }
    },
    ExchangeAreaImagUrl (LRow, LColumn, LLayer) {
      try {
        // 面朝播种位。背后为右  右为单数  左为双
        let imag = ''
        if ((parseInt(LRow) % 2)) {
          imag = 'right'
        } else {
          imag = 'left'
        }
        return require('../assets/imag/shewc/' + imag + '.png')
      } catch (e) {
        console.log('ImageViewerUrl', e.toString())
        return ''
      }
    },
    //托盘显示
    ImageCIDSearch (value, type, status = true) {
      status = value.split('-').length === 1
      if (status) {
        value = [1, 1]
      } else {
        value = [6, value.split('-')[1]]
      }
      this.Imag[type] = require('../assets/imag/tote/' +
        parseInt(value[0]) +
        '-' +
        parseInt(value[1]) +
        '.png')
    },
    // 扫描SKU
    ScanSkuInfo (value) {
      var scanCount = 0
      if (this.CurrentGoods.SkuId !== value) {
        this.audioPlay('error')
        this.$message({
          message: '请按照推荐SKU扫描!',
          type: 'error',
        })
        return
      }
      this.scanInputMethod('TargetBox')
      this.audioPlay('ok')
    },
    // 判断应扫描数是否大于等于输入扫描数
    clickCardOk (value) {
      if (
        parseFloat(this.scansTotalNum) >= parseFloat(value) &&
        parseFloat(value) >= 0.0
      ) {
        this.scansNum = parseFloat(value)
        this.CurrentGoods.QtyIn = parseFloat(value)
        this.CalculatorDialogVisible = false
      } else {
        this.$message({
          message: '扫描数不能大于应扫描总数',
          type: 'warning',
        })
      }
    },
    // 改变扫描框
    scanInputMethod (newType, flag = true) {
      if (this.scanInputType[newType] === undefined) {
        return
      }
      if (newType == 'OrderID') {
        this.CurrentGoods = { QtyIn: 0 }
        this.BillId = ''
        // 全部应扫描商品
        this.AllGoods = []
        // 已扫描商品
        this.ScannedGoods = []
        // 显示扫描记录
        this.ScanRecord = []
        // 页面显示应扫描数
        this.scansTotalNum = 0
        // 页面显示当前已扫描数
        this.scansNum = 0

        this.WarehouseId = ''
        this.StorerId = ''
        this.TargetLocation = ''
        this.TargetBox = ''
        this.Target = {}
        this.AccomplishTask = []
        this.ALL_Tay_List = []
        this.TallyCID = []
        this.GroupNo = null
        if (
          (this.$route.name == 'InventoryOPT' ||
            this.$route.name == 'PickingOPT' ||
            this.$route.name == 'TallyOpt') &&
          flag
        ) {
          this.GETTaskTimer()
        }
      }
      this.scanInput = ''
      this.scanInputPlaceholder = this.scanInputType[newType]
      this.scanType = newType
    },
    getUrlPath () {
      let wPath = window.document.location.href
      // 获取当前页面主机地址之后的目录，如：/admin/index
      let pathName = this.$route.path
      let pos = wPath.indexOf(pathName)
      // 获取主机地址，如：http://localhost:8080
      this.localhostPath = wPath.substring(0, pos).split('#')[0]
      this.localhostPath = this.localhostPath.substring(
        0,
        this.localhostPath.length - 1
      )
    },
    // 点击计算器验证
    clickCalculator () {
      if (this.scanType == 'TargetLocation') {
        this.CalculatorDialogVisible = true
        return
      }
      this.audioPlay('error')
      this.$message({
        message: '获取订单并且扫描SKU后才能对数量进行操作',
        type: 'error',
      })
    },
    // 检查输入扫描框是否为空
    checkInputEmpty () {
      if (this.scanInput == '') {
        this.audioPlay('error')
        this.$message({
          message: '请检查扫描框内容是否为空',
          type: 'error',
        })
        return false
      }
      return true
    },
    // 屏幕显示计算 Value 如果为init为计算初始化数据。
    SummarizeTaskInfo (value) {
      var allcount = 0.0
      var allscancount = 0.0
      var currentRecord = 0.0
      if (value == 'init') {
        // this.ScannedGoods.forEach((item) => {
        // 	// 计算全部扫描数
        // 	allscancount = Arithmetic.accAdd(allscancount, item.FromQty)
        // })
        this.AllGoods.forEach(item => {
          // 计算全部扫描数
          allscancount = Arithmetic.accAdd(allscancount, item.Qty)
        })
        // this.ScannedGoods.forEach(item => {
        // 	// 计算已扫描数量、
        // 	allcount += item.QtyIn
        // })
        // this.ScanRecord.forEach(item => {
        //   // 计算本次已扫描数
        //   currentRecord = Arithmetic.accAdd(currentRecord, item.QtyIn)
        // })
        this.ScanRecord.forEach((item) => {
          // 计算本次已扫描数
          currentRecord = Arithmetic.accAdd(currentRecord, item.Qty)
        })
        this.ScanAllCount = allscancount
        this.ScanGoodCount = Arithmetic.accAdd(allscancount, currentRecord)
        // 将全部扫描数输出到屏幕
        this.scansTotalNum = this.ScanAllCount
        // 把已扫描数量输出
        this.scansNum = 0
        return
      }
      this.AllGoods.forEach((item) => {
        // if (item.UpcCodes.indexOf(value) != -1) {
        if (this.scanType == 'FromCID') {
          if (value === item.CID) {
            // 计算全部扫描数
            allscancount = Arithmetic.accAdd(allscancount, item.Qty)
          }
        } else if (this.scanType == 'SkuId') {
          if (value === item.SkuId) {
            // 计算全部扫描数
            allscancount = Arithmetic.accAdd(allscancount, item.Qty)
          }
        }
      })
      // 将全部扫描数输出到屏幕
      this.scansTotalNum = Arithmetic.accSub(
        Arithmetic.accSub(allscancount, allcount),
        currentRecord
      )
      this.CurrentGoods.QtyIn = this.scansTotalNum
      this.scansNum = this.CurrentGoods.QtyIn
      // 把已扫描数量输出
      //   this.scansNum = 0.0
    },
  },
  beforeDestroy () {
    clearTimeout(this.timer) // 清除
    //离开页面移除监听器页面销毁时，移除监听器，这样就不会导致重复监听。
    window.removeEventListener('onmessageWS', this.getSocketData);
  },
  watch: {
    searchVal: function (val) {
      console.log(val) // 接收父组件的值
      this.WindowsSize = val
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.my-label {
  font-size: 1.3vw;
  width: 10vw;
  /* font-weight: 550 !important; */
  text-align: center !important;
  color: #000000 !important;
}

.my-content {
  color: #000000;
  font-size: 1.3vw;
  /* font-weight: 550 !important; */
  width: 40vw;
}
</style>
<style scoped lang="scss">
.card_box {
  margin-top: 5px;
}

.card_button {
  margin-top: 20px;
  height: 10vh;
  border: none;
  display: flex;
  margin-left: 6vw;

  .el-card__body {
    & > .el-button {
      margin-left: 1vw;
    }
  }
}

.box-card_detail {
  height: 50vh;
}

.paddingStyle {
  /deep/.el-card__body {
    padding: 0px !important;
  }
}

.ItemNumInfo {
  font-size: 7.5vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: #ff0000;
  margin-top: 2vh;
}

.ItemNumlabel {
  font-size: 3vh;
  margin-top: 1vh;
}

.ItemNumInfoDetail {
  font-size: 3vh;
  margin-top: 2vh;
  // border: 1px solid #CCCCCC;
}

.imageClass {
  .el-image {
    // &>img {
    /deep/.el-image__inner {
      height: 50%;
      width: 20.5vh;
    }
  }
}

.rotateClass {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  transform: rotate(90deg);
  margin-top: -5vh;

  /deep/.el-image__inner {
    height: 100%;
    width: 18vh;
  }
}

.imageClass_detail {
  height: 25vh;
}

.buttonClass {
  width: 200px;
  height: 70px;
  font-size: 25px;
}

// .pagination {
// 	margin-top: 20px;
// 	text-align: right;
// }
// .el-form-item {
//     margin-bottom: 0px !important;
// }
// .el-form {
// 	display: flex;
// }
// 顶部扫描框
.headerInputClass {
  height: 11vh;

  /deep/ .el-input__inner {
    height: 100%;
    font-size: calc(100vh - 93vh);
    background-color: rgb(84, 105, 122);
    color: #ffffff;
  }

  /deep/ .el-input__inner::-webkit-input-placeholder {
    color: #ffffff;
  }
}

.el-message-box {
  .el-message-box__content {
    .el-message-box__container {
      .el-message-box__message {
        & > p {
          font-size: 25px;
        }
      }
    }
  }
}

// 卡片头部
/deep/.el-card__header {
  padding: 8px 32px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.paddingStyle {
  /deep/ .el-card__body {
    padding: 0px !important;
  }
}
.image_Or {
  position: relative;
  height: 20vh;
  width: 23vw;
  margin-top: -0.7vh;
  .TargetLocationImag1 {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  .TargetLocationImag {
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background-color: rgba(0, 0, 0, 0);
  }
  .el-image {
    // &>img {
    /deep/.el-image__inner {
      height: 100%;
      width: 100%;
    }
  }
}
.dialog_commit {
  .el-form {
    .el-form-item {
      /deep/.el-form-item__label {
        font-size: 2.5vh;
        line-height: 4vh;
      }

      .el-form-item__content {
        .el-input {
          /deep/.el-input__inner {
            height: 5vh;
            font-size: 2.5vh;
          }
        }
      }
    }
  }
  .el-radio-group {
    .el-radio {
      border-radius: 12px;
      height: 60px;
      width: 250px;
      font-size: 25px;
    }
  }
}
</style>
